let task
let allCategories

const logColorEnum = {
    RED: "red",
    GREEN: "green",
    YELLOW: "yellow",
    WHITE: "white",
    BLUE: "blue",
}

// 通过WebSocket传输给后端的消息类型
const messageTypeEnum = {
    START: 0,
    END: 1,
    PAUSE: 2,
    CONTINUE: 3
}

// WebSocket连接
let ws = null
// 日志容器
let $logContainer

// 数据总条数
let dataNum = 0
let $dataNum

let time = 0
let $time
let timeRefreshIntervalId

let $speed
let speedRefreshIntervalId

$(document).ready(function () {
    $logContainer = $('#logContainer')
    $dataNum = $('.number')
    $speed = $('#average-speed')
    $time = $('#collection-time')

    // 初始化layui表单
    const form = layui.form;
    form.render();  // 渲染表单元素

    window.pageEvent.onSendTaskDetail((event, param) => {
        task = param.task
        allCategories = param.allCategories
        // 渲染任务数据
        form.val('taskDetailForm', {
            taskName: task.taskName,
            taskDefinition: task.taskDefine,
            taskDescription: task.taskDescription,
        })

        execTask()
    })

    $('#pause-task-btn').on('click', function () {
        if ($(this).text() === "暂停任务") {
            ws.send(`${messageTypeEnum.PAUSE} `)
            $(this).text("继续任务")
            $('#task-status').text("任务已暂停")
            stopRotation()
        } else {
            ws.send(`${messageTypeEnum.CONTINUE} `)
            $(this).text("暂停任务")
            $('#task-status').text("任务运行中")
            startRotation()
        }
    })
    $('#end-task-btn').on('click', function () {
        ws.send(`${messageTypeEnum.END} `)
    })

    // 导出数据按钮点击事件
    $('#export-data-btn').on('click', function () {
        console.log(123)
        // 显示导出格式选择弹窗
        layer.open({
            type: 1,
            title: '选择导出格式',
            content: $('#exportFormatDialog'),
            area: ['400px', '250px'],
            btn: ['确定', '取消'],
            yes: function (index) {
                // 获取选中的导出格式
                const format = $('input[name="exportFormat"]:checked').val();

                // 生成默认文件名（使用任务ID和时间戳）
                const defaultFileName = `task_${task.taskName}.${format}`;

                // 创建一个隐藏的文件选择输入框
                const input = document.createElement('input');
                input.type = 'file';
                input.nwsaveas = defaultFileName;  // 设置默认文件名

                // 监听文件选择
                input.addEventListener('change', function (e) {
                    const filePath = this.value;
                    if (filePath) {
                        console.log(format, filePath)
                    }
                });

                // 触发文件选择
                input.click();

                // 关闭弹窗
                layer.close(index);
            }
        });
    })

    $('#reExec-btn').on('click', function () {
        execTask()
    })

    $('#out-btn').on('click', function () {
        window.pageEvent.switchPage(1, {
            task: task,
            allCategories: allCategories,
        })
    })

})

function execTask() {
    buttonGroupTaskExec()
    $logContainer.empty()
    $dataNum.text(0)
    dataNum = 0
    time = 0
    $time.text("0秒")
    $speed.text("0条/分钟")

    // 创建 WebSocket 连接
    printLog(logColorEnum.BLUE, "正在建立连接...")
    startRotation()
    ws = new WebSocket('ws://localhost:8080/task/exec')
    // 连接成功事件
    ws.onopen = function () {
        printLog(logColorEnum.BLUE, "连接建立成功")
        // 发送需要执行的任务的ID
        ws.send(`${messageTypeEnum.START} ${task.taskId}`);

        // 定期计算爬取速度 xxx条/分钟
        speedRefreshIntervalId = setInterval(function () {
            $speed.text(`${computeSpeed()}条/分钟`)
        }, 3000)

        // 显示时间
        timeRefreshIntervalId = setInterval(function () {
            $time.text(`${++time}秒`)
        }, 1000)
    }

    // 接收到服务器消息事件
    ws.onmessage = function (event) {
        const params = parseParam(event.data)
        printLog(params[0], params[1]);
        if (params[0] === logColorEnum.GREEN) {
            $dataNum.text(++dataNum)
        }
    };

    // 连接关闭事件
    ws.onclose = function () {
        printLog(logColorEnum.BLUE, "连接关闭");
        $('#task-status').text("任务结束")
        stopRotation()

        // 停止定时任务
        clearInterval(speedRefreshIntervalId)
        clearInterval(timeRefreshIntervalId)

        // 最后计算一次平均采集速度
        $speed.text(`${computeSpeed()}条/分钟`)

        // 切换按钮组
        buttonGroupTaskFinish()

    };

    // 发生错误事件
    ws.onerror = function (event) {
        console.log(event)
        printLog(logColorEnum.RED, `意外错误：${event.data}`);
    };
}

function parseParam(message) {
    const idx = message.indexOf(" ")
    const param1 = message.substring(0, idx)
    const param2 = message.substring(idx + 1, message.length)
    return [param1, param2]
}

function printLog(color, message) {
    // 日志容器中最多显示1000条日志
    if ($logContainer.children().length === 1000) {
        $logContainer.children().first().remove()
    }
    $logContainer.append(`<div class="log-line ${color}">${message}</div>`)
    $logContainer.scrollTop($logContainer[0].scrollHeight);

}

function computeSpeed() {
    if (time < 60) {
        return dataNum
    }
    return dataNum / (time / 60)
}

function buttonGroupTaskExec() {
    $('#end-task-btn').show()
    $('#pause-task-btn').show()

    $('#export-data-btn').hide()
    $('#reExec-btn').hide()
    $('#out-btn').hide()
}

function buttonGroupTaskFinish() {
    $('#end-task-btn').hide()
    $('#pause-task-btn').hide()

    $('#export-data-btn').show()
    $('#reExec-btn').show()
    $('#out-btn').show()
}
